<template>
  <div class="tabs">
    <el-tabs v-model="first" type="border-card">
      <el-tab-pane label="修改基本信息" name="first">
        <el-form :model="revampForm" :rules="revampFormRule" ref="revampFormRef" label-width="70px">
          <el-form-item label="手机" prop="telephone">
            <el-input v-model="revampForm.telephone" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="username">
            <el-input v-model="revampForm.username"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="revampForm.email"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="revampForm.gender" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            class="revise"
            @click="submit('update',revampForm,revampFormRef)"
          >修改</el-button>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="second">
        <el-form
          :model="revampPasswordForm"
          :rules="revampPasswordRule"
          ref="revampPasswordRef"
          label-width="100px"
        >
          <el-form-item label="输入原密码" prop="oldPassword">
            <el-input v-model="revampPasswordForm.oldPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="输入新密码" prop="newPassword">
            <el-input v-model="revampPasswordForm.newPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkP">
            <el-input v-model="revampPasswordForm.checkP" type="password"></el-input>
          </el-form-item>
          <el-button
            type="primary"
            class="revise"
            @click="submit('password',revampPasswordForm,revampFormRef)"
          >修改</el-button>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="数据初始化" name="third">
        <h3>什么是数据初始化？</h3>
        <p>
          网站初始化是为了让用户重新开始记账，本操作会清空系统内所有财务数据！
          <br />正常记账的用户请
          <span class="danger">谨慎使用</span>，一旦系统初始化，所有数据都会丢失!
        </p>
        <el-button type="danger" class="reset" @click="reset">修改</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    //验证规则
    var checkEmail = (rule, value, cb) => {
      const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;

      if (reg.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法邮箱！"));
    };
    var checkMobile = (rule, value, cb) => {
      const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (reg.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法手机号！"));
    };
    var checkPassword = (rule, value, cb) => {
      if (value !== this.revampPasswordForm.newPassword) {
        return cb(new Error("两次输入密码不一致！"));
      }
    };
    return {
      // 修改基本信息
      revampForm: {
        username: "",
        telephone: "",
        email: "",
        gender: ""
      },
      // 修改密码
      revampPasswordForm: {
        telephone: "",
        oldPassword: "",
        newPassword: "",
        checkP: ""
      },
      revampFormRef: "",
      revampPasswordRef: "",
      first: "first",
      revampFormRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" }
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ]
      },
      revampPasswordRule: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        checkP: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.revampForm.username = window.sessionStorage.getItem("username");
    this.revampForm.telephone = window.sessionStorage.getItem("telephone");
    this.revampPasswordForm.telephone = window.sessionStorage.getItem(
      "telephone"
    );
    this.revampForm.email = window.sessionStorage.getItem("email");
    this.revampForm.gender = window.sessionStorage.getItem("gender");
  },
  mounted() {
    this.revampFormRef = this.$refs.revampFormRef;
    this.revampPasswordRef = this.$refs.revampPasswordRef;
  },
  methods: {
    submit(url, data, ref) {
      // 修改信息
      ref.validate(async valid => {
        if (!valid) {
          return;
        }
        const { data: result } = await this.$http.put(url, data);
        if (result.errorCode != 0) {
          this.$message({
            showClose: true,
            message: "修改失败！",
            type: "warning"
          });
          return;
        }
        if (url === "update") {
          window.sessionStorage.setItem("username", result.data.username);
          window.sessionStorage.setItem("telephone", result.data.telephone);
          window.sessionStorage.setItem("email", result.data.email);
          window.sessionStorage.setItem("gender", result.data.gender);
          this.$emit("parfun", window.sessionStorage.getItem("username"));
        }
        this.$message({
          showClose: true,
          message: "修改成功！",
          type: "success"
        });
      });
    },
    reset() {
      this.$confirm("此操作将永久删除所有记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 数据初始化，将所记记录全部删除
          const { data: result } = await this.$http.delete(
            "deleteAll/" + sessionStorage.getItem('telephone')
          );
          if (result.errorCode != 0) {
            this.$message({
              showClose: true,
              message: "删除失败！",
              type: "warning"
            });
            return;
          }
          this.$message({
            showClose: true,
            type: "success",
            message: "初始化成功!"
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style lang="less" scoped>
.tabs {
  margin: 20px auto;
  width: 80%;
}
.revise {
  float: right;
}
.reset {
  margin-top: 30px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.danger {
  color: #ff1141;
}
</style>